@import '@/assets/css/global-style.scss';

.box_exam {
  @include set-location(position, 'center');
  height: 50%;
  width: 70%;
  box-shadow: 0.3125rem 0.3125rem 0.4375rem 0.625rem rgba(0, 0, 0, 0.015);
  padding: 0 0.625rem;
  padding-right: 0;
  background-color: #fff;
  z-index: 10;

  .left {
    flex: 1;
    margin-right: 10px;
    .header {
      @include set-location(display, 'horization');
      height: 3.75rem;
    }

    .time {
      font-weight: 700;
    }

    .question_area {
      height: 100%;
    }

    .options {
      overflow: auto;
      height: 50%;
    }

    .box_btn {
      position: fixed;
      bottom: 0.625rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .btn {
      cursor: pointer;
      @include set-location(display, 'center');
      height: 3.125rem;
      width: 6.25rem;
      background: #fff;
    }

    .confirm {
      background-color: var(--primary-color);
      color: #fff;
    }
  }

  .right {
    display: flex;
    flex-direction: column;

    width: 20%;
    height: 100%;

    .submit {
      @include set-location(display, 'center');
      color: #fff;
      height: 3.125rem;
      background-color: var(--secondary-color);
      cursor: pointer;
    }

    .answer_card {
      overflow: auto;
      flex: 1;
      margin-top: 1.25rem;
    }

    .serial {
      cursor: pointer;
      @include set-location(display, 'center');
      height: 1.875rem;
      width: 1.875rem;
      border-radius: 100%;
      border: 1px solid #000;
    }

    .answered_serial {
      color: #fff;
      background-color: var(--selected-blue);
    }
  }
}
